<template>
  <div v-loading="dataInfo.loading" class="map" @click="cancelClick">
    <div class="left-menu">
      <div class="warehouse">
        <div class="warehouse-image">
          <img class="icon1" referrerpolicy="no-referrer" src="./image/location-icon.png"
               style="width: 100%; height: 100%;"/>
        </div>
        <transition>
          <el-select v-model="dataInfo.currentWare" style="width: 100%;" size="default" transfer
                     placeholder="请选择仓库" @change="changeWare">
            <el-option v-for="item in dataInfo.wareList" :key="item.whCode" :value="item.whCode" :label="item.whName"/>
          </el-select>
        </transition>
      </div>
      <div class="update-time">
        <div>更新时间：{{ dataInfo.updateTime }}
          <i class="el-icon-refresh" style="margin-left: 10px; cursor: pointer;font-size: 20px;" @click="search"/>
        </div>
      </div>
      <div class="search-content" :class="dataInfo.searchShow ? '' : 'autoHeight'">
        <div class="search-image">
          <img referrerpolicy="no-referrer" src="./image/search.png" style="width: 100%; height: 100%; cursor: pointer"
               @click="dataInfo.searchShow = !dataInfo.searchShow"/>
        </div>
        <transition name="el-zoom-in-top">
          <div v-if="dataInfo.searchShow" class="search">
            <el-form :model="dataInfo.searchForm" label-width="70px">
<!--              <el-form-item label="货主">-->
<!--                <el-select v-model="dataInfo.searchForm.ownerCodeList" size="mini" transfer collapse-tags placeholder=""-->
<!--                           popper-class="select-dropDown" multiple style="width: 100%;" filterable>-->
<!--                  <el-option v-for="item in dataInfo.customerList" :key="item.customerCode" :value="item.customerCode"-->
<!--                             :label="item.customerName"/>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="箱号">
                <el-input v-model="dataInfo.searchForm.containerNum" size="mini" placeholder=""/>
              </el-form-item>
              <el-form-item label="报关单号">
                <el-input v-model="dataInfo.searchForm.businessNum" size="mini" placeholder=""/>
              </el-form-item>
              <el-form-item label="提单号">
                <el-input v-model="dataInfo.searchForm.billOfLandingNo" size="mini" placeholder=""/>
              </el-form-item>
              <el-form-item label="品类">
                <el-select v-model="dataInfo.searchForm.matTypCodeList" size="mini" transfer placeholder="" multiple
                           style="width: 100%;" filterable>
                  <el-option v-for="item in dataInfo.matTypeList" :key="item.dictValue" :value="item.dictValue"
                             :label="item.dictName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="货物性质">
                <el-select v-model="dataInfo.searchForm.goodsTypeList" size="mini" transfer placeholder="" multiple
                           style="width: 100%;" filterable>
                  <el-option value="1" label="普通货物"/>
                  <el-option value="2" label="保税货物"/>
                  <el-option value="3" label="普通质押"/>
                  <el-option value="4" label="保税质押"/>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层">
                <el-select v-model="dataInfo.searchForm.layerCodeList" size="mini" transfer placeholder="" multiple
                           style="width: 100%;" filterable>
                  <el-option v-for="item in dataInfo.floorList" :key="item.id" :value="item.dictValue"
                             :label="item.dictName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="入库时间">
                <el-date-picker v-model="dataInfo.searchForm.searchDate" type="daterange" style="width: 100%;"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
              </el-form-item>
            </el-form>
            <div style="margin-left: 30%;">
              <el-button class="search-button" size="small"
                         style="width: 120px;background-color:#23B3B5;border: none; color: #fff" @click="search">查询
              </el-button>
              <el-button size="small" type="primary" @click="reset">重置</el-button>
            </div>
          </div>
        </transition>
      </div>
      <div class="contentTest">
        <div class="cargo-statistics-content">
          <div class="cargo-statistics-image">
            <img referrerpolicy="no-referrer" src="./image/goods.png" style="width: 100%; height: 100%; cursor: pointer"
                 @click="cargoStatisticsShowChange"/>
          </div>
          <transition name="el-zoom-in-top">
            <div v-show="dataInfo.cargoStatisticsShow" class="cargo-statistics">
              <div ref="cargoStatic" style="height: 60%;"></div>
              <el-row style="color: #fff;" align="bottom">
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="total">{{
                        dataInfo.cargoStaticData.stockNum.stockTon ? dataInfo.cargoStaticData.stockNum.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.stockNum.stockTrace ? dataInfo.cargoStaticData.stockNum.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.stockNum.stockQty ? dataInfo.cargoStaticData.stockNum.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.stockNum.boxQty ? dataInfo.cargoStaticData.stockNum.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">库存总数(吨)</p>
                </el-col>
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="value">{{
                        dataInfo.cargoStaticData.bondedGoods.stockTon ? dataInfo.cargoStaticData.bondedGoods.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.bondedGoods.stockTrace ? dataInfo.cargoStaticData.bondedGoods.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.bondedGoods.stockQty ? dataInfo.cargoStaticData.bondedGoods.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.bondedGoods.boxQty ? dataInfo.cargoStaticData.bondedGoods.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">
                    <img referrerpolicy="no-referrer" src="./image/bondedGoods.png" style="height: 12px;"/>
                    保税货物(吨)
                  </p>
                </el-col>
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="value">{{
                        dataInfo.cargoStaticData.ordinaryGoods.stockTon ? dataInfo.cargoStaticData.ordinaryGoods.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.ordinaryGoods.stockTrace ? dataInfo.cargoStaticData.ordinaryGoods.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.ordinaryGoods.stockQty ? dataInfo.cargoStaticData.ordinaryGoods.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.ordinaryGoods.boxQty ? dataInfo.cargoStaticData.ordinaryGoods.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">
                    <img referrerpolicy="no-referrer" src="./image/generalCargo.png" style="height: 12px;"/>
                    普通货物(吨)
                  </p>
                </el-col>
              </el-row>
              <el-row style="color: #fff; margin-top: 20px" align="bottom">
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="total">{{
                        dataInfo.cargoStaticData.pledgedGoods.stockTon ? dataInfo.cargoStaticData.pledgedGoods.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.pledgedGoods.stockTrace ? dataInfo.cargoStaticData.pledgedGoods.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.pledgedGoods.stockQty ? dataInfo.cargoStaticData.pledgedGoods.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.pledgedGoods.boxQty ? dataInfo.cargoStaticData.pledgedGoods.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">
                    质押货物(吨)
                  </p>
                </el-col>
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="value">{{
                        dataInfo.cargoStaticData.bondedPledged.stockTon ? dataInfo.cargoStaticData.bondedPledged.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.bondedPledged.stockTrace ? dataInfo.cargoStaticData.bondedPledged.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.bondedPledged.stockQty ? dataInfo.cargoStaticData.bondedPledged.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.bondedPledged.boxQty ? dataInfo.cargoStaticData.bondedPledged.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">
                    <img referrerpolicy="no-referrer" src="./image/bondedPledge.png" style="height: 12px;"/>
                    保税质押(吨)
                  </p>
                </el-col>
                <el-col :span="8">
                  <el-tooltip effect="dark" placement="top-start">
                    <p class="value">{{
                        dataInfo.cargoStaticData.ordinaryPledged.stockTon ? dataInfo.cargoStaticData.ordinaryPledged.stockTon : 0
                      }}</p>
                    <template #content>
                      <p>托数：{{
                          dataInfo.cargoStaticData.ordinaryPledged.stockTrace ? dataInfo.cargoStaticData.ordinaryPledged.stockTrace : 0
                        }}</p>
                      <p>件数：{{
                          dataInfo.cargoStaticData.ordinaryPledged.stockQty ? dataInfo.cargoStaticData.ordinaryPledged.stockQty : 0
                        }}</p>
                      <p>箱数：{{
                          dataInfo.cargoStaticData.ordinaryPledged.boxQty ? dataInfo.cargoStaticData.ordinaryPledged.boxQty : 0
                        }}</p>
                    </template>
                  </el-tooltip>
                  <p class="title">
                    <img referrerpolicy="no-referrer" src="./image/ordinaryPledge.png" style="height: 12px;"/>
                    普通质押(吨)
                  </p>
                </el-col>
              </el-row>
            </div>
          </transition>
        </div>

        <div class="category-statistics-content">
          <transition name="el-zoom-in-top">
            <div v-show="dataInfo.categoryStatisticsImageShow" class="category-statistics-image">
              <img referrerpolicy="no-referrer" src="./image/matType.png"
                   style="width: 100%; height: 100%; cursor: pointer"
                   @click="dataInfo.categoryStatisticsShow = !dataInfo.categoryStatisticsShow"/>
            </div>
          </transition>
          <transition name="el-zoom-in-top">
            <div v-show="dataInfo.categoryStatisticsShow" class="category-statistics">
              <div>
                <div class="title">
                  <div class="writtenWords">
                    库位楼层分布重量占比
                  </div>
                </div>
              </div>
              <div ref="matStatic" style="height: 90%;"></div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="right-floor">
      <div v-for="item in dataInfo.floorList" :key="item.id" class="floor-item"
           :class="item.disabled ? 'floor-item_disabled' : item.isClick ? 'floor-item_click' : ''"
           @click="floorClick(item)">
        <p style="font-size: 18px;">{{ item.dictName }}</p>
        <p style="font-size: 12px;color: rgba(255, 255, 255, 0.65);">{{ item.traceCodeNum }}托</p>
      </div>
    </div>
    <div class="legend">
      <transition name="el-zoom-in-center">
        <el-row v-if="dataInfo.legendShow" justify="center" align="middle"
                style="width: 100%; height: 100%; background-color: rgba(0, 64, 89, 0.6);border-radius: 6px; padding: 10px 0;overflow: auto">
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/generalCargo.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">普通货物</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/bondedGoods.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">保税货物</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/ordinaryPledge.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">普通质押</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/bondedPledge.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">保税质押</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/location.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">库位</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/stacker.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">堆垛机</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/workbench.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">工作台</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/threadBody.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">线体</p>
          </el-col>
          <el-col :span="24">
            <img referrerpolicy="no-referrer" src="./image/otherEquipment.png" style="width: 30%;margin-left: 35%"/>
            <p class="legend-title">其他设备</p>
          </el-col>
          <!--                    <el-col :span="24">-->
          <!--                        <img referrerpolicy="no-referrer" src="./image/AGV2.png" style="width: 30%;margin-left: 35%" />-->
          <!--                        <p class="legend-title">AGV</p>-->
          <!--                    </el-col>-->
        </el-row>
      </transition>
    </div>
    <div v-show="dataInfo.showClose" id="data-info" class="data-info">
      <div class="header">
        <span>点位信息</span>
        <span class="close" @click="closeModel">×</span>
      </div>
      <div class="content" v-for="(item, index) in dataInfo.currentClickInfo" :key="index">
        <p>货主：{{ item.ownerName }}</p>
        <p>箱号：{{ item.containerNum }}</p>
        <p>库位编号：{{ item.locCode }}</p>
        <p>托盘编号：{{ item.traceCode }}</p>
        <p>产品编号：{{ item.matCode }}</p>
        <p>货物名称：{{ item.matName }}</p>
        <p>件数：{{ item.totalQty }}件</p>
        <p>重量：{{ item.matWei }}吨</p>
        <p>入库时间：{{ formatDate('y-m-d h:m:s', item.dateLastOn) }}</p>
        <p>提单号：{{ item.billOfLandingNo }}</p>
        <p>报关单号：{{ item.businessNum }}</p>
        <p>楼层：{{ item.layerCode }}F</p>
        <p>货物属性：{{ getGoodsTypeName(item.goodsType) }}</p>
      </div>
    </div>
    <div class="map">
      <div id="container" class="stage" @click="mapClick"></div>
    </div>
  </div>
</template>

<script>
import Konva from 'konva';
import util from './index';
import $time from '../../libs/timeUtil'
import * as echarts from 'echarts';
import {getCurrentAgentPermissionWareHouse} from "@/libs/handleWareHouseList";
import {useCustomer} from "@/view/wms/js/index";
import {
  getAllCustomer, getAllMatType, getFloorNum, getAllWareList
  , getTunnelCoordinate, selectAllStockInfo, selectGoodsStatic
  , selectWarehouseDataInfo, selectWarehouseStockTypeTop
} from "@/api/warehouse/map";

export default {
  name: 'MonitorMap',
  data() {
    return {
      wmsUrl: '',
      wareObj: {},
      ownerCodeList: [],
      deviceType: ['S'],
      NODE_W_H: 20,
      clickRect: new Konva.Rect({
        x: 0,
        y: 0,
        width: this.NODE_W_H,
        height: this.NODE_W_H,
        fill: 'rgba(55, 237, 111, .5)',
        zIndex: 1
      }),
      stage: null,
      layer: null,
      AGVLayer: null,
      clickLayer: null,
      realList: {},
      tunnelList: [],
      materialInfo: [],
      scale: 1,
      stageWidth: window.innerWidth,
      stageHeight: window.innerHeight,
      imgSrcList: util.getImage(),
      dataInfo: {
        updateTime: $time.dateToDateSecondTime(new Date(), '', '/'),
        legendShow: true,
        searchShow: false,
        cargoStatisticsShow: false,
        categoryStatisticsShow: false,
        categoryStatisticsImageShow: true,
        loading: false,
        showClose: false,
        showStatistics: false,
        wareList: [],
        floorList: [],
        currentCustomer: [],
        customerList: [],
        matTypeList: [],
        currentClickInfo: [],
        statisticsData: {},
        cargoStaticData: {
          stockNum: {},
          bondedGoods: {},
          ordinaryGoods: {},
          pledgedGoods: {},
          bondedPledged: {},
          ordinaryPledged: {}
        },
        formItem: {
          searchDate: []
        },
        currentWare: '',
        currentFloor: '1',
        physicalAreaCode: 'S',
        currentFloorEnum: '1',
        searchForm: {},
        showCloseTop: 0,
        showCloseLeft: 0,
        cargoChart: null,
        matChart: null
      }
    }
  },

  beforeMount() {
    window.onresize = null;
  },

  mounted() {
    this.initCargoChart();
    this.initMatChart();
    this.$nextTick(() => {
      for (let item in this.imgSrcList) {
        let img = new Image();
        img.src = this.imgSrcList[item].img;
        img.onload = () => {
          this.imgSrcList[item].src = img;
        };
      }
      this.initData(true);
    });
  },

  methods: {
    formatDate(format, date) {
      let data = null;
      switch (format) {
        case 'y-m-d h:m:s':
          data = $time.timestampToDateTimeSecond(date);
      }
      return data;
    },

    // 重置
    reset() {
      this.dataInfo.searchForm = {
        ownerCodeList: [],
        containerNum: '',
        businessNum: '',
        billOfLandingNo: '',
        matTypCodeList: [],
        goodsTypeList: [],
        layerCodeList: [],
        searchDate: []
      };
      this.search();
    },
    getGoodsTypeName(goodsType) {
      if (!goodsType) {
        return '';
      }
      let str = goodsType + '';
      switch (str) {
        case '1':
          return '普通货物';
        case '2':
          return '保税货物';
        case '3':
          return '普通质押';
        case '4':
          return '保税质押';
      }
    },

    async search() {
      this.dataInfo.loading = true;
      let body = this.getParam({layerCodeList: this.dataInfo.searchForm.layerCodeList});
      const floorResponse = await getFloorNum(this.wmsUrl, body);
      this.handleFloorData(floorResponse);
      this.initStage();
      this.getMapData();
      this.dataInfo.updateTime = $time.dateToDateSecondTime(new Date(), '', '/');
      this.goodsStatic();
      this.matNameStatic();
      this.initMapData();
    },
    async goodsStatic() {
      let self = this;
      let data = {
        layerCodeList: this.dataInfo.searchForm.layerCodeList
      };
      const {returnData, returnCode} = (await selectGoodsStatic(this.wmsUrl, this.getParam())).data;
      if (returnCode === 400) {
        self.$confirm('未查询到您要求的货物信息，请核实相关查询条件后重新查询，谢谢！', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          showConfirmButton: false,
          showCancelButton: false,
          roundButton: false,
          buttonSize: 'mini',
          type: 'warning'
        });
        this.dataInfo.cargoStaticData = {
          stockNum: {},
          bondedGoods: {},
          ordinaryGoods: {},
          pledgedGoods: {},
          bondedPledged: {},
          ordinaryPledged: {}
        };
        let option = {
          series: [
            {
              data: [
                {value: 0, name: '普通质押 0% '},
                {value: 0, name: '普通 0% '},
                {value: 0, name: '保税 0% '},
                {value: 0, name: '保税质押 0% '}
              ]
            }
          ]
        };
        this.dataInfo.cargoChart.setOption(option);
      }
      let total = returnData.ordinaryPledged.stockTrace + returnData.ordinaryGoods.stockTrace + returnData.bondedGoods.stockTrace + returnData.bondedPledged.stockTrace;

      function getProportion(total, item) {
        if (total && total > 0) {
          return ((item / total) * 100).toFixed(2) + '%';
        } else {
          return '0%';
        }
      }

      let option = {
        series: [
          {
            data: []
          }
        ]
      };
      if (returnData.ordinaryPledged.stockTrace) {
        option.series[0].data.push({
          value: returnData.ordinaryPledged.stockTrace,
          name: '普通质押 ' + getProportion(total, returnData.ordinaryPledged.stockTrace)
        });
      }
      if (returnData.ordinaryGoods.stockTrace) {
        option.series[0].data.push({
          value: returnData.ordinaryGoods.stockTrace,
          name: '普通 ' + getProportion(total, returnData.ordinaryGoods.stockTrace)
        });
      }
      if (returnData.bondedGoods.stockTrace) {
        option.series[0].data.push({
          value: returnData.bondedGoods.stockTrace,
          name: '保税 ' + getProportion(total, returnData.bondedGoods.stockTrace)
        });
      }
      if (returnData.bondedPledged.stockTrace) {
        option.series[0].data.push({
          value: returnData.bondedPledged.stockTrace,
          name: '保税质押 ' + getProportion(total, returnData.bondedPledged.stockTrace)
        });
      }
      this.dataInfo.cargoChart.setOption(option);
      this.dataInfo.cargoStaticData = returnData;
    },
    async matNameStatic() {
      // let data = {
      //     layerCodeList: this.dataInfo.searchForm.layerCodeList
      // };
      const {returnData} = (await selectWarehouseStockTypeTop(this.wmsUrl, this.getParam())).data;
      let source = [];
      returnData.forEach(x => {
        if (x.stockInfo && x.stockInfo.stockTon) {
          let arr = [];
          arr.push(x.matName);
          arr.push(x.stockInfo.stockTon);
          arr.push(x.stockInfo.stockTrace);
          arr.push(x.stockInfo.stockQty);
          source.push(arr);
        }
      });
      let option = {
        dataset: {
          source
        }
      };
      this.dataInfo.matChart.setOption(option);
    },
    getParam(params) {
      let body = {
        ownerCodeList: this.ownerCodeList,
        whCode: this.dataInfo.currentWare,
        containerNum: this.dataInfo.searchForm.containerNum,
        businessNum: this.dataInfo.searchForm.businessNum,
        billOfLandingNo: this.dataInfo.searchForm.billOfLandingNo,
        matTypCodeList: this.dataInfo.searchForm.matTypCodeList,
        goodsTypeList: this.dataInfo.searchForm.goodsTypeList,
        startTime: $time.timestampToDateTimeSecond(this.dataInfo.searchForm.searchDate ? this.dataInfo.searchForm.searchDate[0] : null),
        endTime: $time.timestampToDateTimeSecond(this.dataInfo.searchForm.searchDate ? this.dataInfo.searchForm.searchDate[1] : null),
        ...params
      };
      return body;
    },
    //选择数据
    async initData(flag) {
      this.initStage();
      getCurrentAgentPermissionWareHouse().then(async ({data: returnData, message}) => {
        if (returnData) {
          if (!returnData.length) {
            return this.$Message.error('仓库信息为空！');
          }
          this.wareObj = returnData[0];
          this.wmsUrl = this.wareObj.ipProt;
          if (flag) {
            const wareResponse = await getAllWareList(this.wmsUrl);
            this.dataInfo.wareList = wareResponse.data.returnData;
            if (this.dataInfo.wareList.length) {
              this.dataInfo.currentWare = this.dataInfo.wareList[0].whCode;
            }
          }
          this.wareObj = returnData[0];
          this.wmsUrl = this.wareObj.ipProt;
          this.ownerCodeList = [useCustomer(this)];
          let body = this.getParam({layerCodeList: this.dataInfo.searchForm.layerCodeList});
          const floorResponse = await getFloorNum(this.wmsUrl, body);
          this.handleFloorData(floorResponse);
          this.goodsStatic();
          this.matNameStatic();
          this.initMapData();
          this.getCustomer();
          this.getMatInfo();
        } else if (message) {
          this.$Message.error(message);
        }
      });
    },
    //查询地图数据
    getMapData() {
      let body = this.getParam({layerCodeList: [this.dataInfo.currentFloorEnum]});
      return new Promise((resolve, reject) => {
        selectWarehouseDataInfo(this.wmsUrl, body).then(response => {
          const {returnCode, returnMsg, returnData} = response.data;
          if (returnCode === 200) {
            console.log(returnData.filter(x => x.locTypCode === 'LINE' && x.locDirectionMerge));
            this.realList = util.handleMapData(returnData, 'locCode');
            resolve('success');
          } else {
            reject(returnMsg);
          }
        }).catch(e => {
          reject(e);
        });
      });
    },

    getTunnel() {
      let body = {
        whCode: this.dataInfo.currentWare,
        layerCodeList: [this.dataInfo.currentFloorEnum],
        ownerCodeList: this.ownerCodeList
      };
      return new Promise((resolve, reject) => {
        getTunnelCoordinate(this.wmsUrl, body).then(response => {
          const {returnCode, returnMsg, returnData} = response.data;
          if (returnCode === 200) {
            this.tunnelList = returnData;
            resolve('success');
          } else {
            reject(returnMsg);
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 获取货物信息
    getGoodInfo() {
      return new Promise((resolve, reject) => {
        selectAllStockInfo(this.wmsUrl, this.getParam({layerCodeList: [this.dataInfo.currentFloorEnum]})).then(response => {
          const {returnCode, returnMsg, returnData} = response.data;
          if (returnCode === 200) {
            // this.materialInfo = util.handleMapData(returnData, 'locCode');
            this.materialInfo = returnData;
            resolve('success');
          } else {
            reject(returnMsg);
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 初始地图数据
    initMapData() {
      Promise.all([this.getMapData(), this.getGoodInfo(), this.getTunnel()]).then(() => {
        // Promise.all([getMapData()]).then(() => {
        this.drawMap(this.realList, this.tunnelList);
      }).catch(e => {
        console.log(e);
        this.$Message.error('获取基础数据错误');
        this.dataInfo.loading = false;
      });
    },
    // 获取客户
    async getCustomer() {
      const customerResponse = (await getAllCustomer(this.wmsUrl,{customerProperty: 'h'})).data;
      this.dataInfo.customerList = customerResponse.returnData;
    },
    // 获取品类
    async getMatInfo() {
      const response = (await getAllMatType(this.wmsUrl)).data;
      this.dataInfo.matTypeList = response.returnData;
    },
    // 整合生成楼层
    async handleFloorData(floorResponse) {
      try {
        let {returnData: floorList} = floorResponse.data;
        let arr = [];
        floorList = floorList.filter(x => x.layerCode);
        const floorNum = floorList.length;
        for (let i = 0; i < this.deviceType.length; i++) {
          for (let j = 0; j < floorNum; j++) {
            let floorItem = floorList.filter(x => x.layerCode == j + 1);
            arr.push({
              dictName: `${j + 1}F`,
              dictValue: j + 1,
              disabled: floorItem.length > 0 && floorItem[0].layerFlag == 1,
              traceCodeNum: floorItem && floorItem.length > 0 ? floorItem[0].traceCodeNum : 0,
              isClick: j === 0
            });
          }
        }
        if (this.dataInfo.searchForm.layerCodeList && this.dataInfo.searchForm.layerCodeList.length > 0) {
          arr.forEach(x => {
            x.disabled = this.dataInfo.searchForm.layerCodeList.indexOf(x.dictValue) < 0;
          });
        }

        let activeList = arr.filter(x => !x.disabled);
        if (activeList && activeList.length > 0) {
          this.dataInfo.currentFloorEnum = activeList[0].dictValue;
        }
        arr.forEach(x => {
          x.isClick = x.dictValue == this.dataInfo.currentFloorEnum;
        });
        this.dataInfo.floorList = arr;
      } catch (e) {
        console.log(e);
        this.$Message.error('获取楼层接口失败');
      }
    },
    //仓库变动
    changeWare() {
      this.dataInfo.currentFloorEnum = '1';
      this.initData();
    },
    //楼层变动
    changeFloor() {
      this.dataInfo.loading = true;
      this.initStage();
      this.initMapData();
    },
    // 货主变动
    changeCustomer() {
      this.initStage();
      this.initMapData();
    },
    // 绘制视图
    drawMap(data, tunnelList) {
      const arrList = util.objToArr(data);
      let xArr = [];
      let yArr = [];
      tunnelList.forEach(x => {
        if (x.coordinateType === 'X') {
          xArr = x.dataList;
        }
        if (x.coordinateType === 'Y') {
          yArr = x.dataList;
        }
      });
      xArr.forEach(x => {
        const min = util.hanleXY(x.physicalAreaCode, this.NODE_W_H, x.x, x.y_min, 0, window.innerWidth);
        const max = util.hanleXY(x.physicalAreaCode, this.NODE_W_H, x.x, x.y_max, 0, window.innerWidth);

        if (x.physicalAreaCode === 'S') {
          this.layer.add(new Konva.Line({
            points: [min.x + 10, min.y, min.x + 10, max.y + this.NODE_W_H],
            strokeWidth: this.NODE_W_H,
            stroke: '#CFE3E8'
          }));
          this.layer.add(new Konva.Image({
            x: min.x,
            y: min.y,
            width: this.NODE_W_H,
            height: this.NODE_W_H * 2,
            fill: '',
            stroke: '#fff',
            image: this.imgSrcList.stacker.src
          }));
        }
      });
      for (let i = 0, len = arrList.length; i < len; i++) {
        const {cooX, cooY, locCode, physicalAreaCode, locTypCode, locDirectionMerge} = arrList[i];
        const {img, fill, stroke} = this.getShowLocType(arrList[i]);
        const {x, y} = util.hanleXY(physicalAreaCode, this.NODE_W_H, cooX, cooY, 0, window.innerWidth);
        if (locDirectionMerge) {
          let direction = locDirectionMerge.split('_')[0];
          let num = Number(locDirectionMerge.split('_')[1]);
          for (let i = 1; i <= num; i++) {
            let lineX = 0;
            let lineY = 0;
            switch (direction) {
              case 'left':
                lineX = x - this.NODE_W_H * num;
                lineY = y;
                break;
              case 'right':
                lineX = x + this.NODE_W_H * num;
                lineY = y;
                break;
              case 'up':
                lineX = x;
                lineY = y - this.NODE_W_H * num;
                break;
              case 'down':
                lineX = x;
                lineY = y + this.NODE_W_H * num;
                break;
            }
            this.layer.add(new Konva.Image({
              name: locCode,
              x: direction === 'right' ? lineX + 6 : lineX,
              y: direction === 'up' ? lineY - 5 : lineY,
              width: this.NODE_W_H,
              height: this.NODE_W_H,
              fill: fill,
              stroke: '#fff',
              image: this.imgSrcList.threadBody.src
            }));
          }
        }
        if (physicalAreaCode === 'A') {
          this.AGVLayer.add(new Konva.Image({
            name: locCode,
            x,
            y,
            width: this.NODE_W_H,
            height: this.NODE_W_H,
            fill: fill,
            stroke: img ? '#fff' : stroke,
            image: img,
            zIndex: locTypCode === 'AGV' ? 200 : 100
          }));
        } else if (physicalAreaCode === 'S' && locTypCode !== 'R') {
          this.layer.add(new Konva.Image({
            name: locCode,
            x,
            y,
            width: this.NODE_W_H,
            height: this.NODE_W_H,
            fill: fill,
            stroke: img ? '#fff' : stroke,
            image: img,
            zIndex: locTypCode === 'AGV' ? 200 : 100
          }));
        }
      }
      this.layer.draw();
      this.clickLayer.draw();
      this.dataInfo.loading = false;
    },
    // 滚轮变动
    wheelStage(e) {
      const {wheelDelta, deltalY, offsetX, offsetY} = e.evt;
      const wheelData = wheelDelta || deltalY * -40;
      const rateX = (offsetX - this.stage.getX()) / this.scale;
      const rateY = (offsetY - this.stage.getY()) / this.scale;
      if (wheelData > 0) {
        this.scale = Number((this.scale + 0.05).toFixed(2));
      } else {
        if (this.scale <= 0.2) {
          this.scale = 0.2;
          return;
        }
        this.scale = Number((this.scale - 0.05).toFixed(2));
      }

      const sx = (1 - this.scale) * rateX + offsetX - rateX;
      const sy = (1 - this.scale) * rateY + offsetY - rateY;

      this.stage.setAttrs({
        x: sx,
        y: sy,
        scaleX: this.scale,
        scaleY: this.scale
      });
      this.stage.batchDraw();
    },

    // 关闭
    closeModel() {
      this.dataInfo.showClose = false;
      this.clickRect.hide();
    },
    // 点击
    clickNode(e) {
      const nameKey = e.getName();
      if (nameKey) {
        if (this.realList[nameKey].locTypCode === 'STATION_CELL' || this.realList[nameKey].locTypCode === 'LINE' || this.realList[nameKey].locTypCode === 'STACKING_MACHINE') {
          return;
        }
        this.clickRect.setAttrs({
          x: this.realList[nameKey].physicalAreaCode === 'A' ? (e.getX() - 16) : e.getX(),
          y: this.realList[nameKey].physicalAreaCode === 'A' ? (e.getY() - 450) : e.getY(),
          width: e.width(),
          height: e.height()
        });
        setTimeout(() => {
          this.clickRect.show();
          // this.dataInfo.currentClickInfo = {...this.realList[nameKey], ...this.materialInfo[nameKey]};
          let list = this.materialInfo.filter(item => item.locCode === nameKey);
          list.forEach(item => {
            item = {...item, ...this.realList[nameKey]};
          })
          this.dataInfo.currentClickInfo = list;
          this.dataInfo.showClose = true;
        }, 0);
      } else {
        this.dataInfo.showClose = false;
        this.clickRect.hide();
      }
    },
    cancelClick() {
      this.dataInfo.showClose = false;
      this.clickRect.hide();
    },
    // 显示类型
    getShowLocType(data) {
      let img = null;
      let fill, stroke = '';
      const {goodsType, locTypCode} = data;
      img = '';
      // 保税 goodsBondedProperty 2  质押 supervisionStatus = 1
      if (goodsType === '1') {
        img = this.imgSrcList.generalCargo.src;
      } else if (goodsType === '2') {
        img = this.imgSrcList.bondedGoods.src;
      } else if (goodsType === '3') {
        img = this.imgSrcList.ordinaryPledge.src;
      } else if (goodsType === '4') {
        img = this.imgSrcList.bondedPledge.src;
      } else if (locTypCode === 'R') {
        img = this.imgSrcList.tunnel.src;
      } else if (locTypCode === 'STATION_CELL') {
        img = this.imgSrcList.workbench.src;
      } else if (locTypCode === 'LINE') {
        img = this.imgSrcList.threadBody.src;
      } else if (locTypCode === 'AGV') {
        let srcArr = [this.imgSrcList.AGV2Up.src, this.imgSrcList.AGV2Right.src, this.imgSrcList.AGV2Down.src, this.imgSrcList.AGV2Left.src];
        img = srcArr[Math.floor(Math.random() * 3)];
      } else if (locTypCode === 'STACKING_MACHINE' || locTypCode === 'C') {
        img = this.imgSrcList.otherEquipment.src;
      } else {
        img = this.imgSrcList.location.src;
      }
      return {
        img,
        fill,
        stroke
      };
    },
    // 初始场景
    initStage() {
      this.dataInfo.loading = true;
      this.stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        draggable: true
      });
      this.layer = new Konva.Layer();
      this.AGVLayer = new Konva.Layer();
      this.AGVLayer.offsetX(16);
      this.AGVLayer.offsetY(450);
      this.clickLayer = new Konva.Layer();
      this.stage.add(this.layer);
      this.stage.add(this.AGVLayer);
      this.stage.add(this.clickLayer);
      this.clickLayer.add(this.clickRect);
      this.clickRect.hide();
      this.bindMouse();
      window.onresize = function () {
        this.stageWidth = window.innerWidth;
        this.stageHeight = window.innerHeight;
        this.stage.width(this.stageWidth);
        this.stage.height(this.stageHeight);
      };
    },
    // 绑定事件
    bindMouse() {
      this.stage.on('wheel', e => {
        this.wheelStage(e);
      });
      this.stage.on('mouseup', e => {
        this.clickNode(e.target);
      });
    },
    initCargoChart() {
      let myChart = echarts.init(this.$refs.cargoStatic);
      let option;
      option = {
        legend: {
          show: false
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['25%', '50%'],
            stillShowZeroSum: false,
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#ffffff',
              fontWeight: 'lighter',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            itemStyle: {
              color: function ({dataIndex}) {
                if (dataIndex === 0) {
                  return '#5f9da4';
                }
                if (dataIndex === 1) {
                  return '#2898a3';
                }
                if (dataIndex === 2) {
                  return '#bd595b';
                }
                if (dataIndex === 3) {
                  return '#bf6c6c';
                }
              }
            }
          }
        ]
      };
      this.dataInfo.cargoChart = myChart;
      option && myChart.setOption(option);
    },
    initMatChart() {
      let myChart = echarts.init(this.$refs.matStatic);
      let option;

      option = {
        legend: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          position: ['50%', '50%']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            stillShowZeroSum: false,
            label: {
              alignTo: 'edge',
              formatter: '{name|{@floor}F} {@吨数}吨\n',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#ffffff',
              fontWeight: 'lighter',
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                },
                name: {
                  fontWeight: 700
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 10,
              maxSurfaceAngle: 50
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            dimensions: ['floor', '吨数', '托数', '件数'],
            encode: {
              tooltip: ['吨数', '托数', '件数'],
              value: '吨数'
            },
            itemStyle: {
              color: function ({dataIndex}) {
                if (dataIndex === 0) {
                  return '#bafeff';
                }
                if (dataIndex === 1) {
                  return '#23b3b5';
                }
                if (dataIndex === 2) {
                  return '#2fb9bb';
                }
                if (dataIndex === 3) {
                  return '#33c8ca';
                }
                if (dataIndex === 4) {
                  return '#59d6d8';
                }
                if (dataIndex === 5) {
                  return '#4ae6e8';
                }
                if (dataIndex === 6) {
                  return '#70f1f3';
                }
                if (dataIndex === 7) {
                  return '#29aaac';
                }
                if (dataIndex === 8) {
                  return '#05f4f8';
                }
                if (dataIndex === 9) {
                  return '#079ea0';
                }
              }
            }
          }
        ]
      };

      this.dataInfo.matChart = myChart;
      option && myChart.setOption(option);
    },

    mapClick(e) {
      console.log(this.stageHeight, e.offsetY)
      if (this.stageHeight - e.offsetY >= 357) {
        document.getElementById('data-info').style.top = e.offsetY + 'px';
        document.getElementById('data-info').style.left = e.offsetX + 'px';
        // document.getElementById('data-info').style.bottom = e.offsetY + 100 + 'px';
      } else {
        document.getElementById('data-info').style.top = e.offsetY - 357 + 'px';
        document.getElementById('data-info').style.left = e.offsetX + 'px';
      }
    },

    floorClick(item) {
      if (item.disabled) {
        return;
      }
      this.dataInfo.floorList.forEach(x => {
        x.isClick = false;
      });
      item.isClick = true;
      this.dataInfo.loading = true;
      this.dataInfo.currentFloorEnum = item.dictValue;
      this.initStage();
      this.initMapData();
      this.dataInfo.updateTime = $time.dateToDateSecondTime(new Date(), '', '/');
      this.goodsStatic();
      this.matNameStatic();
    },

    cargoStatisticsShowChange() {
      this.dataInfo.cargoStatisticsShow = !this.dataInfo.cargoStatisticsShow;
      this.dataInfo.categoryStatisticsShow = this.dataInfo.cargoStatisticsShow;
      this.dataInfo.categoryStatisticsImageShow = this.dataInfo.cargoStatisticsShow;
    },
  },

  updated() {
    this.dataInfo.cargoChart.resize()
    this.dataInfo.matChart.resize()
  },

};
</script>

<style scoped lang="less">
.map {
  position: relative;
  background-color: #ffffff;
}

.menu {
  position: absolute;
  width: 100%;
  background: #f9f9f9;
  z-index: 10;
}

.statistic-operate {
  position: absolute;
  right: 0;
  width: auto;
  z-index: 11;
  padding: 5px;
  background-color: rgba(226, 226, 226, .8);
  cursor: default;
}

.statistic {
  position: absolute;
  right: 0;
  width: auto;
  background-color: rgba(226, 226, 226, .8);
  z-index: 11;
  padding: 0 5px;

  .table tr td {
    padding: 5px;
  }
}

.map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.floorClass {
  margin-left: 5px;
  width: 120px;
}

.customerClass {
  margin-left: 5px;
  width: 300px;
}

.data-info {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 260px;
  padding: 20px;
  background-color: rgba(0, 64, 89, 0.6);
  color: rgba(255, 255, 255, 1);
  z-index: 200;
  border-radius: 6px;
  height: 330px;
  overflow: auto;

  .content {
    padding: 5px;
    padding-bottom: 10px;
    height: auto !important;
  }
}

.header {
  padding: 5px 4px;
  display: flex;
  justify-content: space-between;

  .close {
    font-size: 16px;
    cursor: pointer;
  }
}

.search {
  margin-top: 5px;

  span:not(:first-child) {
    margin-left: 5px;
  }
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  line-height: 30px;
}

.green {
  background: #23A365;
}

.red {
  background: #D60303;
}

.yellow {
  background: #F57C22;
}
</style>
<style lang="less">

.left-menu {
  pointer-events: none;
  position: absolute;
  top: 20px;
  left: 50px !important;
  z-index: 100;
  width: 330px;
  height: 100vh;

  .search-content {
    @media screen and (max-height: 1200px) {
      height: 35%;
    }
    position: relative;
    width: 100%;
    height: 30%;
    margin-bottom: 30px;

    .search-image {
      position: absolute;
      top: -20px;
      left: -20px;
      z-index: 753;
      width: 60px;
      height: 56px;
      pointer-events: auto;
    }
  }

  .search {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: scroll;
    border-radius: 6px;
    background-color: rgba(0, 64, 89, 0.6);

    .el-form-item__label {
      color: rgba(13, 251, 253, 1) !important;
    }

    .el-input__inner, .el-date-editor .el-range-input {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.4);
      border: none;
    }

    .el-date-editor .el-range-input {
      background-color: rgba(0, 0, 0, 0.0);
    }
  }

  .search-content::-webkit-scrollbar {
    width: 10px !important
  }

  .search::-webkit-scrollbar {
    width: 7px !important;
  }

  .search::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
  }

  .search::-webkit-scrollbar-button {
    opacity: 0;
  }

  .search::-webkit-scrollbar-corner {
    opacity: 0;
  }

  .contentTest {
    @media screen and (max-height: 1200px) {
      position: absolute;
      height: 90%;
      width: 690px;
      display: flex;
    }
    height: 100%;
  }

  .cargo-statistics-content {
    @media screen and (max-height: 1200px) {
      height: 50%;
      width: 50%;
      margin-right: 30px;
    }
    height: 30%;
    margin-bottom: 30px;

    .cargo-statistics-image {
      float: left;
      position: relative;
      top: -20px;
      left: -20px;
      z-index: 753;
      width: 60px;
      height: 56px;
      pointer-events: auto;
    }
  }

  .cargo-statistics {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 64, 89, 0.6);
    border-radius: 6px;
    padding-top: 20px;

    p {
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .title {
      font-size: 12px;
    }

    .total {
      font-size: 20px;
    }

    .value {
      font-size: 14px;
    }
  }

  .category-statistics-content {

    @media screen and (max-height: 1200px) {
      //position: absolute;
      //top: calc(35px + 45%);
      left: 360px;
      height: 50%;
      width: 50%;
    }
    width: 100%;
    height: 25%;

    .category-statistics-image {
      float: left;
      position: relative;
      top: -20px;
      left: -20px;
      z-index: 753;
      width: 60px;
      height: 56px;
      pointer-events: auto;
    }
  }

  .category-statistics {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 64, 89, 0.6);
    border-radius: 6px;

    .title {
      display: flex;
      position: relative;
      top: 10px;
      left: 0;

      .writtenWords {
        width: 200px;
        padding-left: 10px;
        line-height: 25px;
        color: #fff;
        background: linear-gradient(to right, rgba(51, 185, 194, 1), rgba(51, 185, 194, 0));
        margin-left: 5px;
      }
    }
  }

  .no-bgc {
    background-color: rgba(0, 64, 89, 0);
  }
}

.right-floor {
  @media screen and (max-height: 1200px) {
    height: 70px;
  }
  position: fixed;
  top: 130px;
  right: 20px;
  display: flex;
  align-items: center;
  z-index: 100;
  width: 40vw;
  max-width: 1000px;
  height: 90px;
  overflow: auto;
  background-color: rgba(1, 62, 87, 0.6);
  border-radius: 6px;

  .floor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10%;
    height: 100%;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
  }

  .floor-item_disabled {
    background-color: #696868;
  }

  @keyframes bgcChange {
    100% {
      background-color: rgba(1, 62, 87, 0.6);
    }
  }

  .floor-item_click {
    animation-name: bgcChange;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    color: rgba(13, 251, 253, 1)
  }
}

.right-floor::-webkit-scrollbar {
  width: 0 !important
}

.warehouse {
  pointer-events: auto;
  margin-bottom: 40px;

  .el-input__inner, .el-date-editor .el-range-input {
    color: #ffffff;
    background-color: rgba(0, 64, 89, 0.6);
    border: none;
    padding-left: 50px;
  }

  .warehouse-image {
    position: absolute;
    top: -10px;
    left: -20px;
    z-index: 753;
    width: 60px;
    height: 56px;
  }
}

.legend {
  position: fixed;
  top: 250px;
  right: 20px;
  width: 88px;
  height: 65vh;
  border-radius: 6px;

  z-index: 90;

  .legend-title {
    color: #fff;
    width: 100%;
    font-size: 12px;
    text-align: center;
  }
}

@keyframes autoHeightChange {
  100% {
    height: 50px !important;
  }
}

.autoHeight {
  height: 50px !important;
}

.update-time {
  pointer-events: auto;
  position: fixed;
  top: 130px;
  left: 590px;
  width: 250px;
  height: 35px;
  padding: 0 10px;
  border-radius: 6px;
  line-height: 35px;
  color: #fff;
  background-color: rgba(0, 64, 89, 0.6);

  .el-icon-refresh {
    position: absolute;
    right: 10px;
    top: 7px;
  }
}
</style>
